<template>
  <div>
    <img class="user-poster"
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F66058172-d2ef-fad7-e21c-11b6cf5586b9%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653658479&t=37214f5c6c044cfa199588cc4dd58cd2">
    <van-row class="user-links">
      <van-col span="6">
        <van-icon name="pending-payment" />
        我的钱包
      </van-col>
      <van-col span="6">
        <van-icon name="records" />
        我的收藏
      </van-col>
      <van-col span="6">
        <van-icon name="tosend" />
        练习记录
      </van-col>
      <van-col span="6">
        <van-icon name="logistics" />
        排行榜
      </van-col>
    </van-row>

    <van-cell-group class="user-group">
      <van-cell icon="points" title="更新资料" is-link />
      <van-cell icon="gold-coin-o" title="更改密码" is-link />
    </van-cell-group>

    <van-cell-group>
      <!-- <van-cell icon="gold-coin-o" title="切换账号" is-link /> -->
      <van-cell icon="gift-o" title="注销"  @click="logoutFunc" is-link  />
    </van-cell-group>
  </div>
</template>

<script>

import { Row, Col, Icon, Cell, CellGroup } from 'vant';
import { useRouter } from 'vue-router';
import { Dialog } from 'vant';

export default {
  name: 'myInformation',
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Dialog.Component.name]: Dialog.Component,
  },
  setup() {
    const router = useRouter();
    const logoutFunc = function () {
      Dialog.confirm({
        title: '标题',
        message:
          '要退出登录么？',
      }).then(() => {
        /**
         * 注销登录,清除状态
         */
       
        router.push('/login')
      })
        .catch(() => {
          // on cancel
        });
    }

    return{
      logoutFunc,
    }


  }
};
</script>


<style lang="less">
.user {
  &-poster {
    width: 100%;
    height: 53vw;
    display: block;
  }

  &-group {
    margin-bottom: 15px;
  }

  &-links {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;

    .van-icon {
      display: block;
      font-size: 24px;
    }
  }
}
</style>
